<template>
  <div class="chart-container">
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref<HTMLElement>()
let chart: echarts.ECharts | null = null

// 精确匹配图片中的数据
const xAxisData = ['09/10', '09/11', '09/12', '09/13', '09/14', '09/15', '09/16', '09/17', '09/18', '09/19', '09/20']
const orderAmountData = [30, 62, 68, 20, 80, 20, 46, 21, 51, 19, 20]
const orderCountData = [50, 73, 81, 71, 60, 58, 69, 40, 21, 77, 56]

onMounted(() => {
  if (chartRef.value) {
    chart = echarts.init(chartRef.value)

    const option = {
      title: {
        text: '收入',
        left: '0',
        textStyle: {
          fontSize: 16,
          fontWeight: 'bold',
          color: '#333'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: '{b}<br/>{a0}: {c0}<br/>{a1}: {c1}'
      },
      legend: {
        data: ['订单金额', '订单数量'],
        bottom: 0,
        itemWidth: 25,
        itemHeight: 14,
        itemGap: 20,
        textStyle: {
          fontSize: 12
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisData,
        axisLine: {
          lineStyle: {
            color: '#DCDFE6'
          }
        },
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          color: '#606266',
          interval: 0,
          rotate: 0,
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        interval: 20,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#DCDFE6'
          }
        },
        axisTick: {
          show: true
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#EBEEF5'
          }
        },
        axisLabel: {
          color: '#909399',
          fontSize: 10,

        }
      },
      series: [
        {
          name: '订单金额',
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          smooth: true,
          lineStyle: {
            width: 3,
            color: 'lightblue'
          },
          itemStyle: {
            color: '#fff',    // 内部填充白色
            borderColor: 'lightblue', // 边框颜色
            borderWidth: 2    // 边框宽度
          },

          data: orderAmountData
        },
        {
          name: '订单数量',
          type: 'line',
          symbol: 'circle',
          symbolSize: 6,
          smooth: true,
          lineStyle: {
            width: 3,
            color: 'lightgreen'
          },
          itemStyle: {
            color: '#fff',    // 内部填充白色
            borderColor: 'lightgreen', // 边框颜色
            borderWidth: 2    // 边框宽度
          },

          data: orderCountData
        }
      ]
    }

    chart.setOption(option)
    window.addEventListener('resize', resizeHandler)
  }
})

const resizeHandler = () => {
  chart?.resize()
}

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
  chart?.dispose()
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
